<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>简易记账</title>
</head>

<link
        href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css"
        rel="stylesheet">
<link
        href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css"
        rel="stylesheet">
<!-- jquery -->
<script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>
<script
        src="https://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- bootstrap-table.min.js -->
<script
        src="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
<!-- 引入中文语言包 -->
<script
        src="https://cdn.bootcss.com/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js"></script>


<style>
    .play {
        display: none;
    }

    .active {
        margin: 30px auto;
        margin-bottom: 30px;
    }

    #bodey {
        margin-left: 30px;
        margin-right: 30px;
    }

    #addbutton {
        margin-left: 30px;
        margin-top: 30px;
        margin-bottom: 30px;
    }

    #inoutcode {
        height: 30px;
        width: 80px;
    }

    .dialog1 {
        margin-top: 30px;
        margin-bottom: 30px;
        height: 30px;
    }

    #remark {
        width: 500px;
    }

</style>


<body>

<div id="bodey">
    <div class="active">
        <table>
            <tr>
                <td>收支</td>
                <td><select id="inoutcode">
                    <option value="" selected="selected">选择收支</option>
                    <option th:value="0">收入</option>
                    <option th:value="1">支出</option>
                </select></td>
                <td>金额</td>
                <td><input id="startmoney" th:type="text">至<input id="endmoney" th:type="text"></td>
                <td>日期</td>
                <td><input id="starttime" th:type="text">至<input id="endtime" th:type="text"></td>
            </tr>
        </table>

        <div id="addbutton">
            <button id="add" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">记一笔</button>
            <button id="search" class="btn btn-primary btn-lg">筛选</button>
        </div>


    </div>

    <div>
        收入:<input id="inmoney" th:type="text" th:value="5000"/>
        支出:<input th:type="text" th:value="2000"/>
        余额:<input th:type="text" th:value="3000"/>
    </div>
    <div>
        <table class="table table-hover" id="cusTable" data-pagination="false"
               data-show-refresh="false" data-show-toggle="false"
               data-showColumns="false">
            <thead>
            <tr>
                <td data-field="id" class="play"></td>
                <th data-field="inoutCode" class="play">收支编码</th>
                <th data-field="inoutName">收支</th>
                <th data-field="usercode" class="play">人员编码</th>
                <th data-field="username" class="play">姓名</th>
                <th data-field="money">金额</th>
                <th data-field="remark">说明</th>
                <th data-field="recordTime">时间</th>
                <th data-field="typeCode" class="play">类型编码</th>
                <th data-field="typeName" class="play">类型</th>
                <!--<th class="col-xs-2" data-field="action"
                    data-formatter="actionFormatter" data-events="actionEvents">操作
                </th>-->
            </tr>
            </thead>
        </table>
    </div>
</div>


<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <table>
                    <tr>
                        <th>
                            <lable for=“codename”>收支</lable>
                        </th>
                        <td><select id="codename" class="dialog1">
                            <option th:value="0">收入</option>
                            <option th:value="1">支出</option>
                        </select></td>
                    </tr>
                    <tr>
                        <th>
                            <lable for=“money”>金额</lable>
                        </th>
                        <td><input class="dialog1" th:type="text" id="money"/></td>
                    </tr>
                    <tr>
                        <th>
                            <lable for=“remark”>说明</lable>
                        </th>
                        <td><input class="dialog1" th:type="text" id="remark"/></td>
                    </tr>
                </table>

            </div>
            <div class="modal-footer">
                <button type="button" id="addmoney" class="btn btn-default" data-dismiss="modal">确认
                </button>
                <button type="button" id="addcance" class="btn btn-primary" data-dismiss="modal">取消
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
</body>

<script>

</script>

<script type="text/javascript">

    function addcance() {
        $("#money").val(null);
        $("#remark").val(null);
    }

    $("#addmoney").click(function () {
        var account = new Object();
        account.inoutCode = $("#codename").val();
        account.money = $("#money").val();
        account.remark = $("#remark").val();
        $.ajax({
            type: "POST",
            url: "./saveAccount",
            data: JSON.stringify(account),
            contentType: "application/json; charset=utf-8",
            success: function (data) {
                alert("记账成功!")
            },
            error: function (data) {
                alert("记账失败,失败原因如下:" + data.error)
            }
        })
        addcance();
        onRefresh();
    })
    $("#addcance").click(function () {
        addcance();
    })


    $("#search").click(function () {
        onRefresh();
    })

    function searchdata() {
        return {
            inoutcode: $("#inoutcode").val(),
            startmoney: $("#startmoney").val(),
            endmoney: $("#endmoney").val(),
            starttime: $("#starttime").val(),
            endtime: $("#endtime").val()
        }
    }

    function onRefresh() {
        var obj = searchdata();
        var account = JSON.stringify(obj);
        //调用函数，初始化表格
        initTable(account);
    }

    $(document).ready(function () {
        onRefresh();
    });

    function initTable(account) {
        //先销毁表格
        $('#cusTable').bootstrapTable('destroy');
        //初始化表格,动态从服务器加载数据
        $("#cusTable").bootstrapTable({
            method: "POST", //使用get请求到服务器获取数据
            url: "./getAccountList",//获取数据的Servlet地址  ${pageContext.request.contextPath}
            contentType: "application/json;charset=utf-8",
            queryParams: account,
            dataType: "json",
            striped: true, //表格显示条纹
            pagination: true, //启动分页
            pageSize: 10, //每页显示的记录数
            pageNumber: 1, //当前第几页
            pageList: [10, 15, 20], //记录数可选列表
            search: false, //是否启用查询
            showRefresh: true, //显示刷新按钮
            sidePagination: "client", //表示客户端分页
            onLoadSuccess: function (data) { //加载成功时执行
                //alert("加载成功!" + data);
                balance(data);
            },
            onLoadError: function (data) { //加载失败时执行
                //alert("加载失败!" + data);
            }
        });
    }

    function balance(data) {
        var inmoney = 0;
        var outmoney = 0;
        var balance = 0;
        for (var i = 0; i < data.length; i++) {
            if ("0" == data[i].inoutCode) {
                inmoney = inmoney + data[i].money;
            }
            if ("1" == data[i].inoutCode) {
                outmoney = outmoney + data[i].money;
            }
        }
        balance = inmoney - outmoney;
        $("#inmoney").val(inmoney)
        $("#outmoney").val(outmoney)
        $("#balance").val(Math.abs(balance))
    }

    function actionFormatter(val, row, index) {
        return '<a class="mod tc" >修改</a> ';
    }

    window.actionEvents = {
        'click .mod': function (e, value, row, index) {
            window.open("./update?id=" + row.id, "_self");
        }
    }
</script>

</html>